<!-- 职位详情 -->
<template>
	<view class="page">
		<view class="card">
			<view class="detail">
				<view class="cont">
					<view class="title flex justify-between align-center">
						<view class="text">
							{{item.positionName}}
						</view>
						<view class="money">
							{{item.positionLower}}k - {{item.positionUpper}}k
						</view>
					</view>
					<view class="msg">
						{{item.companyCity}}|{{item.companyArea}}|{{jingyan}}|{{xueli}}
					</view>
				</view>
				<view class="user flex">
					<view class="left">
						<image
							:src="item.avatar"
							mode=""></image>
					</view>
					<view class="right flex justify-between flex-column">
						<view class="name">
							{{item.companyName}}
						</view>
						<view class="nichen">
							{{item.companyBusiness}} {{item.companyType}} {{renshu}}
						</view>
					</view>
				</view>
			</view>
			<view class="instructions">

			</view>
		</view>
		<view class="content">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view class="document" style="height: calc(100vh - 80rpx - 310rpx - 115rpx - env(safe-area-inset-bottom));">
				<view v-show="current == 0" style="height: 100%;">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="swipe" style="height: 100%;">
							<view class="title">
								岗位职责
							</view>
							<view class="textare">
								<view class="aushi" v-for="(it, i) in item.positionDuties" :key="i">
									{{it}}
								</view>
							</view>
							<view class="title">
								任职要求
							</view>
							<view class="textare">
								<view class="aushi" v-for="(it, i) in item.positionRequest" :key="i">
									{{it}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-show="current == 1" style="height: 100%;">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="swipe" style="height: 100%;">
							<view class="title">
								公司简介
							</view>
							<view class="textare">
								<view class="aushi">
									{{item.companyIntroduction}}
								</view>
							</view>
							<view class="title">
								工作时间与福利待遇
							</view>
							<view class="textare treat flex align-center flex-wrap">
								<view class="treatment flex align-center" v-for="it in item.companyTreatment"
									:key="it.id">
									<view class="icon flex justify-center align-center">
										<image v-if="it == '五险一金'"src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/treatment3.png" mode=""></image>
										<image v-if="it == '大小周'"src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/treatment1.png" mode=""></image>
										<image v-if="it == '全勤奖'"src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/treatment2.png" mode=""></image>
										<image v-if="it == '节假福利'"src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/treatment0.png" mode=""></image>
									</view>
									<view class="name">
										{{it}}
									</view>
								</view>
							</view>
							<view class="title">
								公司地址
							</view>
							<view class="map">
								<map style="width: 100%; height: 100%;" :latitude="item.latitude" :longitude="item.longitude"
									:markers="covers" enable-rotate></map>
								<cover-view class="m1">
								</cover-view>
								<cover-view class="m2">
								</cover-view>
								<cover-view class="m3">
								</cover-view>
								<cover-view class="m4">
								</cover-view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-show="current == 2" style="height: 100%;">
					<scroll-view class="scroll-view" scroll-y="true"
						@scrolltolower="scrollToLower1" style="height: 100%;">
						<view class="list" v-for="it in leftList" @click.stop="linkDetail(it)">
							<list :companyShow="companyShow" :item="it" :li="1"></list>
							<view class="line" style="height: 20rpx;background-color: #f5f5f5;line-height: 0;">
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="bottom" @click="delivery">
			<view class="btn flex justify-center align-center" @click="chat()">
				立即沟通
			</view>
		</view>
		<view v-if="show" class="mask flex justify-center align-center">
			<view class="car">
				<view class="top flex justify-center align-center">
					<view class="title">
						投递提示
					</view>
					<view class="icon flex justify-center align-center" @click="cancel">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/cancel.png" mode=""></image>
					</view>
				</view>
				<view class="botn">
					<view class="b1 flex">
						<text>基本信息：</text>
						<text>已完成</text>
					</view>
					<view class="b2 flex">
						<text>个人简历：</text>
						<text class="col">尚未完善</text>
					</view>
					<view class="b3">
						注意：简历完善度将影响企业对投递者的判断，请先完善信息后再投递。
					</view>
					<view class="b4 flex justify-between align-center">
						<view class="left flex justify-center align-center" @click="cancel">
							取消
						</view>
						<view class="right flex justify-center align-center" @click="link">
							立即完善
						</view>
					</view>
				</view>
				<view class="imgss">
					<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/toudi.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		detail
	} from '@/data/chance.js'
	var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				list: [{
					name: '职位详情'
				}, {
					name: '公司信息'
				}, {
					name: '其他职位'
				}],
				detail:[],
				item: {},
				id:0,
				show: false,
				complete: false,	//	资料是否完善
				current: 0,
				detail,
				shared:false,
				listQurey:{
					id:''
				},
				chatQurey:{
					positionListId:''
				},
				companyShow:true,
				leftList:[],
				getQurey:{
					companyId:'',
					pageNum: 1,
					pageSize: 5
				},
				id:null
			}
		},
		onLoad(option) {
			qqmapsdk = new QQMapWX({
				key: 'YMVBZ-6I5CG-FNSQI-IZXFZ-UWWMT-JNBI7' //这里自己的secret秘钥进行填充
			});
			
			if(uni.getStorageSync('openId')){
				this.show = !uni.getStorageSync('jianli')
			}
			if(option.id){
				this.shared = true
			}
			if(!this.shared){
				this.id = uni.getStorageSync('pageNum')
			}else{
				this.id = decodeURIComponent(option.id)
			}
			if(this.item.bant){
				if(this.complete){
					//资料已完善
				}else{
					//资料未完善
					this.show = true
				}
			}
			this.init()
			getApp().watch(this.getInit, 'status')
		},
		computed:{
			jingyan(){
				switch(this.item.positionExperience) {
				    case 0: 
						return '不限'
				        break;
				    case 1:
				        return '在校'
				        break;
					case 2:
					    return '应届'
					    break;
					case 3:
						return '1年以内'
					    break;
					case 4:
					    return '1-3年'
					    break;
					case 5:
					    return '3-5年'
					    break;
				    case 6:
				        return '5-10年'
				        break;
				    case 7:
				        return '10年以上'
				        break;
				} 
			},
			xueli(){
				switch(this.item.positionEducation) {
				    case 0: 
						return '不限'
				        break;
				    case 1:
				        return '大专'
				        break;
					case 2:
					    return '本科'
					    break;
					case 3:
						return '硕士及以上'
					    break;
				} 
			},
			renshu() {
				switch(this.item.companyRange){
					case 1:
						return '0-20人'
					    break;
					case 2:
					    return '20-99人'
					    break;
					case 3:
					    return '100-499人'
					    break;
					case 4:
						return '500-999人'
					    break;
					case 5:
						return '1000人以上'
					    break;
				}
			}
		},
		methods: {
			//初始化
			async init() {
				await this.getData()
				await this.getPosition()
			},
			getInit(val){
				console.log('输出变化的值',val)
				let time = null
				if(val) {
					time = setTimeout(()=>{
						//初始化函数, 静默授权后的具体操作
						this.$get('/user/UserInfo').then((res)=>{
							if(res.code == 200){
								let info = res.data
								uni.setStorageSync('anonymousAvatar', info.anonymousAvatar)
								uni.setStorageSync('company', info.company)
								uni.setStorageSync('flowerName', info.flowerName)
								uni.setStorageSync('userId', info.userId)
								uni.setStorageSync('position', info.position)
								uni.setStorageSync('userId', info.userId)
							}
						})
						
						this.$get('/userResumeFile/list').then((res)=>{
							if(res.code == 200){
								let jianli = res.data
								if (jianli) {
							uni.setStorageSync('jianli', true)
						}
							}
						})
						clearTimeout(time) //销毁定时器
					},500)
				}
			},
			scrollToLower1(){
				this.getQurey.pageNum ++
				this.getPosition()
			},
			getPosition(){
				this.$get('/positionList/page',this.getQurey).then((res)=>{
					if(res.code == 200){
						this.leftList = this.leftList.concat(res.data.records)
						console.log(this.leftList)
					}
				})
			},
			//获取数据
			async getData() {
				this.listQurey.id = this.id
				let {data: item } = await this.$get('/positionList/detail' , this.listQurey)
				this.item = item
				this.getQurey.companyId = item.companyId
			},
			//取消按钮
			cancel(){
				this.show = false
			},
			linkDetail(item){
				uni.setStorageSync('pageNum', item.positionListId)
				uni.navigateTo({
					url: '/pagesB/positionDetail/positionDetail'
				})
			},
			//去完善资料
			link(){
				this.show = false
				//跳转去完善资料
				uni.navigateTo({
					url: '/pagesA/attachment/attachment'
				})
			},
			//职位详情和公司信息切换触发
			change(e) {
				this.current = e
			},
			//去投递或去沟通
			delivery(){
				if(this.item.bant){
					if(this.complete){
						//资料已完善
					}else{
						//资料未完善
						this.show = true
					}
				}else {
					
				}
			},
			//立即沟通
			async chat(){
				if(this.$login()){
					this.chatQurey.positionListId = this.id
				let {data,code} = await this.$post('/userChatList/startChat',this.chatQurey)
				console.log(data.roomNumber)
				if(code == 200){
					if(uni.getStorageSync('openId')){
					uni.setStorageSync('roomNum',data.roomNumber)
					uni.navigateTo({
						url: '/pagesA/chat/chat'
					})
				}else{
					uni.navigateTo({
						url:'../../pages/login/login'
					})
				}
				}
				}else{
					uni.navigateTo({
						url: '../../pages/login/login'
					})
				}
				
				
				
			},
			//地址解析为经纬度坐标
			
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.card {
			padding: 0 30rpx 60rpx 30rpx;
			background: #f5f5f5;
			position: relative;

			.detail {
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				height: 250rpx;

				.cont {
					.title {
						.text {
							font-weight: bold;
							color: #333333;
							font-size: 36rpx;
						}

						.money {
							font-weight: 500;
							color: #0265EB;
							font-size: 36rpx;
						}
					}

					.msg {
						// margin-top: 10rpx;
						font-weight: 500;
						color: #999999;
						font-size: 24rpx;
					}
				}

				.user {
					margin-top: 35rpx;

					.left {
						width: 65rpx;
						height: 65rpx;
						margin-right: 20rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.right {
						.name {
							font-weight: 500;
							color: #333333;
							font-size: 28rpx;
						}

						.nichen {
							font-weight: 400;
							color: #999999;
							font-size: 24rpx;
						}
					}
				}
			}

			.instructions {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 20rpx;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				background: #FFFFFF;
			}
		}

		.content {
			.document {
				.swipe {
					padding: 0 30rpx;

					.title {
						margin-top: 30rpx;
						font-weight: bold;
						color: #333333;
						font-size: 28rpx;
					}

					.textare {
						margin-top: 20rpx;
						padding-bottom: 10rpx;

						.aushi {
							margin-bottom: 10rpx;
							font-weight: 400;
							color: #333333;
							font-size: 28rpx;
						}

						.treatment {
							margin-top: 30rpx;
							margin-right: 80rpx;

							.icon {
								width: 24rpx;
								height: 24rpx;
								margin-right: 15rpx;
							}

							.name {
								font-weight: 500;
								color: #333333;
								font-size: 28rpx;
								line-height: 1;
							}
						}

						& .treatment:last-child {
							margin-right: 0;
						}
					}

					.treat {
						margin-top: 0rpx;
						padding-bottom: 10rpx;
					}

					.map {
						width: 690rpx;
						height: 350rpx;
						margin: 30rpx 0;
					}
				}
			}
		}

		.bottom {
			background: #FFFFFF;
			position: fixed;
			bottom: calc(20rpx + env(safe-area-inset-bottom));
			left: 0;
			padding: 20rpx 30rpx 0;

			.btn {
				width: 690rpx;
				height: 75rpx;
				background: #0265EB;
				border-radius: 38rpx;
				line-height: 1;
				font-weight: 500;
				color: #FFFFFF;
				font-size: 32rpx;
				box-shadow: 0rpx 10rpx 10rpx rgba(12,108,240, .4);
			}
		}
		.mask{
			background: rgba(0,0,0,0.4);
			height: 100vh;
			.car{
				width: 534rpx;
				height: 479rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				position: relative;
				.top{
					height: 90rpx;
					border-bottom: 1rpx solid rgba(0,0,0,.12);
					position: relative;
					.title{
						font-weight: 500;
						color: #333333;
						font-size: 32rpx;
						line-height: 1;
					}
					.icon{
						width: 26rpx;
						height: 26rpx;
						position: absolute;
						right: 32rpx;
						top: 32rpx;
					}
				}
				.botn{
					padding: 30rpx 30rpx 60rpx;
					font-weight: 500;
					color: #333333;
					font-size: 28rpx;
					line-height: 1;
					.b1{
						
					}
					.b2{
						margin-top: 30rpx;
						.col{
							color: #0265EB;
						}
					}
					.b3{
						margin-top: 30rpx;
						line-height: 36rpx;
						font-weight: 400;
						color: #333333;
						font-size: 24rpx;
					}
					.b4{
						margin-top: 55rpx;
						.left{
							width: 217rpx;
							height: 70rpx;
							border: 2rpx solid #0265EB;
							border-radius: 8rpx;
							color: #0265EB;
						}
						.right{
							width: 217rpx;
							height: 70rpx;
							background: linear-gradient(90deg, #2F93FE, #171EBC);
							border-radius: 8rpx;
							font-weight: bold;
							color: #FFFFFF;
							line-height: 36rpx;
							text-shadow: 3rpx 3rpx 2rpx rgba(4, 14, 145, 0.4);
							box-shadow: 0rpx 10rpx 10rpx rgba(12,108,240, .4);
						}
					}
				}
				.imgss{
					width: 134rpx;
					height: 99rpx;
					position: absolute;
					left: -42rpx;
					top: -23rpx;
				}
			}
		}
	}
</style>
